<template>
    <div class="carousel_list">
        <h3>轮播图列表</h3>
        <div class="img_list">
            <div class="_list">
                <el-carousel :interval="4000" type="card" height="200px">
                    <el-carousel-item v-for="(item, index) in carouselListData" :key="index">
                        <img :src="item.Carousel_url" alt="Carousel Image"
                            style="width: 100%; height: 100%; object-fit: cover;" />
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>


        <!-- 渲染出表单 -->
        <div class="img_text">
            <h4>修改轮播图</h4>
            <div class="my_form">
                <ul>
                    <li v-for="(item, index) in carouselListData" :key="index">
                        <el-input v-model="item.Carousel_url" style="width: 50vw" placeholder="请输入URL" show-word-limit
                            type="text" alt="index" @change="(e: string) => {
                                console.log(e);
                                console.log(index);
                                // modifiedUrls.value = item.Carousel_url;
                                modeiiedId=item.id;
                            }" />
                        <button @click="updateCarousel(item.Carousel_url, item.Carousel_id)" class="update_btn">
                            修改
                        </button>
                        <button @click="deleteCarousel(item.Carousel_url, item.Carousel_id)" class="del_btn">删除</button>
                    </li>
                </ul>

            </div>
        </div>


    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { carouselList,carouselModify,carouselDel } from '@/api/request'
import { ElMessage, ElMessageBox } from 'element-plus'


// 定义变量来存储修改后的url数据
// const modifiedUrls = ref([])
const modeiiedId= ref([])
// 获取轮播图列表
const carouselListData = ref([])
const getCarouselList = async () => {
    console.log('获取轮播图列表')
    try {
        const res = await carouselList()
        carouselListData.value = res.data
        console.log(carouselListData.value);

    }
    catch (error) {
        console.error("请求失败:", error);
    }
}
getCarouselList();

// 修改轮播图（修改URL）
const updateCarousel = async (newurl: string, my_id: number) => {
    console.log('修改轮播图', newurl, my_id)
    // 获取token
    const mytoken = localStorage.getItem('TOKEN')
    const mydata = {
        token: mytoken,
        imgUrl: newurl,
        id: my_id
    }
    try {
        const res = await carouselModify(mydata)
        if (res.code == 200) {
            ElMessage({
                type: 'success',
                message: res.msg
            })
        }
        else {
            ElMessage({
                type: 'error',
                message: res.msg
            })
        console.log(res.data)
        }
        // 刷新界面
    setTimeout(() => {
        location.reload();
      }, 2000); 
    }
    catch (error) {
        console.error("请求失败:", error);
    }
}

// 删除轮播图
const deleteCarousel = async (newurl: string, my_id: number) => {
    console.log('删除轮播图', newurl, my_id)
    ElMessageBox.confirm('确定要删除该轮播图吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
    .then(async () => {
        // 用户点击确定，执行删除操作
        // 获取token
    const mytoken = localStorage.getItem('TOKEN')
    const mydata = {
        token: mytoken,
        imgUrl: newurl,
        id: my_id
    }
    try {
        const res = await carouselDel(mydata)
        if (res.code == 200) {
            ElMessage({
                type: 'success',
                message: res.msg
            })
        }
        else {
            ElMessage({
                type: 'error',
                message: res.msg
            })
        console.log(res.data)

        }
        // 刷新列表
        getCarouselList()
    }
    catch (error) {
        console.error("请求失败:", error);
    }
    })
    .catch(() => {
        // 用户点击取消，取消删除操作
        ElMessage({
            type: 'info',
            message: '已取消删除'
        });
    });
}



</script>

<style lang="scss">
.carousel_list::-webkit-scrollbar {
    display: none;
    /* 隐藏滚动条 */
}

.carousel_list {
    overflow-y: scroll;
    -ms-overflow-style: none;
    /* IE 和 Edge */
    scrollbar-width: none;
    /* Firefox */

    height: 65vh;

    .img_list {
        margin-top: 2vh;
        width: 100%;
        background-color: white;
        padding-top: 1vh;
        display: flex;

        ._list {
            margin: 0 auto;
            width: 90%;
            height: 30vh;
        }

    }

    .img_text {
        width: 100%;
        background-color: rgb(255, 255, 255);
        z-index: 10;
        padding: 2vh;
        padding-left: 0;
        height: 30vh;
        border-top: 1px solid rgb(222, 222, 222);
        .my_form {
            width: 90%;
            margin: 0 auto;
            ul::-webkit-scrollbar {
                display: none;
                /* 隐藏滚动条 */
            }
            ul {
                list-style: none;
                overflow-y: scroll;
                -ms-overflow-style: none;
                /* IE 和 Edge */
                scrollbar-width: none;
                /* Firefox */
                li {
                    margin-top: 1vh;
                }
            }

            .update_btn {
                background-color: #ddeeff;
                width: 6vw;
                margin-left: 2vw;
                height: 4vh;
                cursor: pointer;

                &:hover {
                    background-color: #7a95ff;
                }
            }
            .del_btn{
                background-color: #ffddee;
                width: 6vw;
                margin-left: 1vw;
                height: 4vh;
                cursor: pointer;
                &:hover {
                    background-color: #ff7a7a;
                }
            }
        }
    }

}
</style>

<style>
</style>